<template>
    <div class="saveUpdate disabledStyle">
        <el-dialog :title="'用户查询'" :visible.sync="showDialog" @close="$emit('update:showUpdate', false)"
                   :showUpdate="showUpdate" width="600px">
            <el-form :model="DetailInfo" ref="saveChn" label-width="120px" size="mini">
                <dialog-wrapper>
                    <el-form-item label="用户ID:" prop="user_id" :rules="[{ required: true, message: '用户ID不能为空'}]">
                        <el-input v-model="DetailInfo.user_id" :disabled="!!DetailInfo.bind_chn" placeholder="请输入用户ID"></el-input>
                    </el-form-item>
                    <el-form-item label="平台:" prop="platform_id"  :rules="[{ required: true, message: '请选择平台'}]">
                        <el-select v-model="DetailInfo.platform_id" filterable placeholder="请选择平台" :disabled="!!DetailInfo.bind_chn">
                            <el-option v-for="(statu, index) of index_mapper" :key="index" :label="statu" :value="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item  v-if="DetailInfo.bind_chn"  label="所属渠道:">
                        <el-input v-model="DetailInfo.bind_chn"  :disabled="!!DetailInfo.bind_chn"   ></el-input>
                    </el-form-item>
                    <el-form-item  v-if="DetailInfo.created_at"  label="注册时间:">
                        <el-input v-model="DetailInfo.created_at" :disabled="!!DetailInfo.bind_chn"  ></el-input>
                    </el-form-item>
                </dialog-wrapper>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button v-if="!!DetailInfo.bind_chn"  @click="backDetal" :loading="loading"  size="small">返回</el-button>
                <el-button v-if="!!DetailInfo.bind_chn" type="primary" :loading="loading" @click="$emit('update:showUpdate', false)" size="small">确定</el-button>
                <el-button v-else type="primary" :loading="loading" @click="getDetail" size="small">查询</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import DialogWrapper from '@/components/DialogWrapper'
    import { getBindUserList } from '@/api'
    export default {
        components: { DialogWrapper },
        data() {
            return {

                showDialog: this.showUpdate,
                loading: false,
                DetailInfo: {},
            }
        },
        props: {
            showUpdate: {
                type: Boolean,
                default: false
            },
            id: {
                type: Number
            },
            index_mapper:{
                type:Object
            }
        },
        created(){
            if(this.id){
                this.getDetail()
            }
        },
        methods: {
            saveDetail(){

            },
            updateDetail(){

            },
            backDetal(){
                this.DetailInfo = Object.assign({}, this.DetailInfo, {bind_chn:null,created_at:null} )

            },
            getDetail(){
                this.$refs.saveChn.validate(valid => {
                    if (valid) {
                        getBindUserList(this.DetailInfo).then(res => {
                            if(res.status === 0){
                                this.DetailInfo = Object.assign({}, this.DetailInfo, {bind_chn:res.data.bind_chn,created_at:res.data.created_at} )
                            }
                        })
                    }
                })
            }
        },
        watch: {
            showUpdate() {
                this.showDialog = this.showUpdate
            }
        }
    }
</script>
